<template>
  <div class="edit">
    <div class="editcon">
      <div class="title">屏幕监控轮播列表 - 编辑</div>
      <div class="ulcon">
        <ul>
          <li @click="selectMult(item)"
            :class="{ selectcls: activeList.find(sub => item.id == sub.id), disable: activeList.length >= 20 && !activeList.find(sub => item.id == sub.id),outline: !item.onlinestate }"
            v-for="(item) in list" :key="item.id">
            <div class="showinfo">
              <div class="kuang"></div>
              <span :class="{notonLine:!item.onlinestate}">{{ item.name }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="e-btn">
        <div @click="emit('close')" class="cancel">取消</div>
        <div @click="emit('confirm', activeList)" class="confirm">确定</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, defineProps, ref, watch, nextTick } from "vue";
import axios from 'axios';

const emit = defineEmits(["close", "confirm", "refresh"]);

const DOMINIP = ''

const props = defineProps({
  duteType: Number,
  monitorList: Array
})

let list = ref()


let activeList = ref([])


let selectMult = (data) => {
  console.log('result:', activeList.value.findIndex(item => item.id == data.id));
  let index = activeList.value.findIndex(item => item.id == data.id)
  if (index > -1) {
    activeList.value.splice(index, 1);
  }
  else {
    activeList.value.push(data)
  }

  console.log(activeList.value)
}


watch(() => props.monitorList, () => {
  list.value = props.monitorList.filter(Boolean)
  activeList.value = props.monitorList.filter(item => item.showCarousel == 1)
}, {
  immediate: true,
  deep: true
})

onMounted(() => {

  nextTick(() => {
  })
})


</script>

<style lang="scss" scoped>
.edit {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;

  .editcon {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 850px;
    height: 450px;
    border: 1px solid rgba(65, 141, 255, 0.15);
    border-radius: 8px;
    background: #0a101c;

    .title {
      color: #fff;
      padding: 12px 0;
      font-size: 20px;
      margin-top: -1px;
      font-weight: bold;
      font-style: italic;
      letter-spacing: 2px;
      background: url('/images/ctitbg.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
    }

    .ulcon {
      margin: 20px;
      padding: 10px;
      border: 1px solid rgba(65, 141, 255, 0.15);
      height: 66%;

      .listtitle {
        margin-bottom: 10px;
        margin-left: 10px;
        position: relative;

        .add {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 10px;
          width: 35px;
          cursor: pointer;
        }
      }

      >ul {
        overflow-y: auto;
        height: 92%;
        flex-wrap: wrap;
        display: flex;
        align-items: flex-start;
        width: 100%;
        color: #fff;

        >li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 31%;
          margin: 0 1% 1%;
          padding: 10px;
          background-size: 100% 100%;
          border: 1px solid rgba(65, 141, 255, 0.15);
          border-radius: 8px;
          position: relative;
          cursor: pointer;

          >img {
            width: 25%;
            height: auto;
          }

          .tag {
            width: 18%;
            position: absolute;
            top: 0;
            left: 0;
          }

          .icon {
            width: 10%;
            position: absolute;
            top: 4px;
            right: 4px;
            display: none;
          }

          &:hover {
            .icon {
              display: inline-block;
            }
          }

          .showinfo {
            width: 70%;
            margin-left: 1%;
            display: flex;
            align-items: center;

            .kuang {
              display: inline-block;
              border-radius: 50%;
              width: 20px;
              height: 20px;
              border: 1px solid rgba(65, 141, 255, 0.15);
              margin-right: 10px;
            }

            >span {
              text-align: left;
              font-size: 12px;
              line-height: 1.2;
              color: rgba(255, 255, 255, 1);
              margin: 2px 0;

            }
          }
        }



        .selectcls {
          border: 1px solid #0f50b3;

          .showinfo {
            .kuang {
              background-color: #0f50b3;
              border: 1px solid #0f50b3;
            }

            >span {
              color: #0f50b3;
            }
            .notonLine{
              color: rgba(255, 255, 255, 1);
            }
          }
        }

        .disable {
          pointer-events: none;

          * {
            opacity: 0.5;
            pointer-events: none;
          }

        }
        .outline{
          * {
            opacity: 0.5;
          }
        }
        .selectcls.outline{
          * {
            opacity: 1;
          }
        }
      }
    }

    .e-btn {
      color: #fff;
      display: flex;
      justify-content: flex-end;
      margin-right: 20px;
      margin-bottom: 20px;

      >div {
        padding: 10px 30px;
        font-style: italic;
        cursor: pointer;
        letter-spacing: 2px;
        margin-left: 10px;
      }

      .cancel {
        background: #1b2338;
        border: 1px solid #303d5d;
      }

      .confirm {
        background: #0f46aa;
        border: 1px solid #0574e5;
      }
    }
  }
}
</style>